문서에 사용할 외부 리소스와의 관계를 설정하고 연결한다.
[Exposed=Window]
interface HTMLLinkElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute USVString href;
[CEReactions] attribute DOMString? crossOrigin;
[CEReactions] attribute DOMString rel;
[CEReactions] attribute DOMString as;
[SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
[CEReactions] attribute DOMString media;
[CEReactions] attribute DOMString integrity;
[CEReactions] attribute DOMString hreflang;
[CEReactions] attribute DOMString type;
[SameObject, PutForwards=value] readonly attribute DOMTokenList sizes;
[CEReactions] attribute USVString imageSrcset;
[CEReactions] attribute DOMString imageSizes;
[CEReactions] attribute DOMString referrerPolicy;
[SameObject, PutForwards=value] readonly attribute DOMTokenList blocking;
[CEReactions] attribute boolean disabled;
[CEReactions] attribute DOMString fetchPriority;
// also has obsolete members
};
HTMLLinkElement includes LinkStyle;유효한 URL을 설정한다. 설정된 URL은 요소에 따라 용도가 정해진다. 리소스를 가져오거나 하이퍼링크를 위한 목적지로 사용될 수 있다. 또한 참조되는 값으로 사용될 수 있다.
비워있지 않은 유효한 URL을 나타내는 문자열을 나타낸다.
<link href="./style.css" rel="stylesheet" type="text/css">교차출처(CORS) 정책에 따라 리소스를 가져올지를 나타낸다.
제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.
유효하지 않은 값을 가진 경우의 기본값은 anonymous이고 누락된 경우 기본값은 NO CORS 상태이다.
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
crossorigin="anonymous" referrerpolicy="no-referrer" />교차 출처(CORS) 요청을 수행하지만 별도의 자격 증명을 보내지 않고 same-origin으로 설정되어 익명으로 요청을 한다.
교차 출처(CORS) 요청을 수행하면서 쿠키(cookie), X.509 인증서, HTTP Basic 인증 중 한 가지 이상의 자격 증명을 포함하는 include로 설정되어 요청을 한다.
리소스를 연결하는 경우 관계를 정의한다. 연결 유형은 지정된 값을 공백으로 구분한 리스트로 작성해야 한다. 그러나 특별히 명시된 경우를 제외하고는 두 번 이상 지정할 수 없다.
순서가 없는 공백으로 구분된 고유한 토큰 세트를 나타낸다.
사용되는 요소가 <link>이고 stylesheet 키워드가 설정된 경우라면 추가적으로 alternate 키워드를 지정하는 경우 대체 스타일 시트로 연결된다. 이 경우 빈 문자열 값을 허용하지 않으며 유효한 값을 가진 title 애트리뷰트가 반드시 존재해야 한다.
일반적으로 외부의 CSS 파일을 연결할 때 <link> 요소를 사용하므로 주로 위와 같은 경우처럼 alternate가 사용된다.
<a>, <area>, <link> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.
작성자에 대한 정보 및 작성자와 연락 가능한 연락처 정보가 담긴 페이지로 연결되는 하이퍼링크로 정의한다.
<a>, <area>, <link> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.
가장 가까운 조상 <article> 요소에 대해 퍼머링크(permalink)를 제공하는 하이퍼링크로 정의한다. 만약에 <article> 요소가 없다면 <link> 요소와 가장 가까운 관계를 가지고 있는 섹션(section)에 대한 퍼머링크(permalink)로 인식된다.
<a>, <area>요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.
현재 문서의 기본 URL을 지정한다.
<link> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.
유저 에이전트(user agent)가 대상 리소스의 출처에 대한 DNS 확인을 선제적으로 수행하도록 지정한다.
<link> 요소에서 외부 리소스(external resource)로 사용이 가능하다.
연결될 문서가 현재 웹사이트 외부의 리소스임을 알린다.
<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.
상황에 맞는 도움말에 대한 링크를 제공한다.
만약 <a> 요소이거나 <area> 요소이면 help는 하이퍼링크가 부모와 자손 요소에 대한 추가 도움말을 제공하는 리소스임을 나타낸다.
<link> 요소라면 help는 하이퍼링크가 페이지 전체에 대한 추가 도움말을 제공하는 리소스임을 나타낸다.
<a>, <area>, <link> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.
현재 문서를 나타내는 아이콘을 가져오는 것으로 처리한다. 때때로 icon 앞에 shortcut 유형을 작성하는 경우가 있는데 이는 비표준이며 웹브라우저가 무시하므로 사용하지 않아야 한다.
<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.
icon 유형을 사용하지 않을 수 있다. 더 자세한 사항은 iOS의 사파리(safari) 웹브라우저의 최신 기술 명세를 확인하라.현재 문서의 주요 콘텐츠가 하이퍼링크(hyperlink)로 참조된 문서에 설명된 저작권 라이선스의 적용을 받는다는 것을 나타낸다.
<a>, <area>, <link>, <form> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.
애플리케이션의 매니페스트(manifest)를 가져오거나 연결한다.
<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.
단색의 투명한 배경을 갖는 SVG 아이콘을 나타낸다. color 애트리뷰트와 함께 사용될 수 있다. W3C 명세에는 반드시 지원하지 않아도 되는 것으로 정했다. 따라서 모든 최신 유저 에이전트가 지원한다고 보기 어렵다.
유저 에이전트(user agent)가 모듈 스크립트(moduel script)를 선제적으로 가져와 나중에 평가할 수 있도록 문서의 모듈 맵(moduel map)에 저장하도록 지정한다. 선택적으로 모듈의 종속성도 가져올 수 있다.
<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.
현재 문서가 구조화된 문서의 일부이며 하이퍼링크(hyperlink)로 연결될 문서가 다음 순서에 해당하는 것을 의미한다.
<a>, <area>, <link>, <form> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.
현재 문서의 게시자(또는 원저자)가 연결될 문서를 보증하지 않음을 나타낸다.
<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.
하이퍼링크(hyperlink)가 현재 문서와 컨텍스트(context)가 단절되어 열린다. 즉 하이퍼링크(hyperlink)로 열린 문서에서 window.opener 속성 값은 null을 갖는다. 신뢰할 수 없는 문서를 연결할 때 유용하다. target 애트리뷰트는 기본적으로 _blank로 적용된다.
<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.
하이퍼링크(hyperlink) 연결을 정의한 현재 문서를 하이퍼링크(hyperlink)로 열릴 문서에서 참조하도록 헤더(header)에 포함시키지 않는다. 즉 문서를 열게한 문서와 단절된다는 측면에서 noopener와 동일한 작용을 한다고 할 수 있다.
<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.
하이퍼링크(hyperlink)로 열릴 문서는 현재 문서의 탐색 컨텍스트(context)를 포함한다. 즉 noopener와 반대 작용을 한다고 볼 수 있다.
<a>, <area>, <form> 요소에서 하이퍼링크(hyperlink) 어노테이션(annotation)으로 사용된다.
현재 문서에 대한 핑백(pingback)을 처리하는 핑백(pingback) 서버의 주소를 지정한다.
<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.
유저 에이전트가 대상 리소스의 오리진(origin)에 선제적으로 연결하도록 지정한다.
<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.
후속 탐색이 가능하도록 유저 에이전트가 대상 리소스를 선제적으로 가져와 캐시(cache)하도록 지정한다.
<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.
유저 에이전트가 as 애트리뷰트에 지정된 잠재적 목적지와 연결 우선 순위에 따라 현재 탐색을 위해 대상 리소스를 선제적으로 가져와 캐시(cache)하도록 지정한다.
<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.
현재 문서가 구조화된 문서의 일부이며 하이퍼링크(hyperlink)로 연결될 문서가 이전 순서에 해당하는 것을 의미한다.
<a>, <area>, <link>, <form> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.
현재 문서 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스에 대한 링크를 나타낸다.
<a>, <area>, <link>, <form> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.
현재 문서에 스타일시트 문서를 리소스로 가져온다.
<link> 요소만 외부 리소스(external resource)로 사용이 가능하다.
하이퍼링크가 현재 문서에 적용되는 태그를 설명하는 문서임을 나타낸다.
<a>, <area> 요소에서 하이퍼링크(hyperlink)로 사용이 가능하다.
<link> 요소에 rel 애트리뷰트가 preload 또는 prefetch 값을 가지고 있을 때만 설정한다. as 애트리뷰트는 href 애트리뷰트에 설정한 리소스에 대한 사전 로드(load) 요청의 잠재적 대상의 유형을 지정한다.
<audio> 요소를 나타낸다.
<iframe>과 <frame> 요소를 나타낸다.
<embed> 요소를 나타낸다.
fetch, XHR 리소스를 나타낸다.
CSS @font-face를 나타낸다.
srcset 또는 imageset 특성을 가진 <img>, <picture> 요소와 SVG <image> 요소, CSS *-image 규칙을 나타낸다.
<object> 요소를 나타낸다.
<script> 요소, 워커(WORKER) importScripts를 나타낸다.
<link rel="stylesheet"> 요소, CSS @import를 나타낸다.
<track> 요소를 나타낸다.
<video> 요소를 나타낸다.
워커(Worker), 공유 워커(SharedWorker)를 나타낸다.
rel 애트리뷰트의 값이 stylesheet인 경우 함께 사용되는 부울(boolean) 유형의 애트리뷰트이다. disabled를 지정한 경우 스타일시트는 페이지 로딩 시점에 불러오지 않는다. 이후 disabled 값이 제거되거나 false로 바뀌는 경우 불러온다.
불리언(boolean) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true)이다.
<input disabled>, <input disabled="disabled">, <input disabled="">
<link href="/style.css" disabled >미디어쿼리 리스트(media query list)를 지정한다.
CSS <media-query-list> 타입을 나타낸다.
연결될 리소스를 적용할 미디어 규칙을 명시한다.
<link href="/style.css" type="text/css" rel="stylesheet" media="screen and (max-width: 1000px)" >연결할 대상 리소스의 사용 언어를 나타낸다. 가능한 값은 BCP47에 따른다. 권고 사항으로 어떤 경우이든 반드시 강제하지 않는다. 리소스를 가져올 때 리소스 링크에 포함된 메타데이터가 아니라 리소스와 관련된 언어 정보만 사용하여 언어를 결정해야 한다.
국제인터넷표준화기구(IETF)에서 콘텐츠에 사용되는 (사람이 사용하는)언어를 태그로 정의한 BCP 47 기술 사양을 나타낸다. HTTP, HTML, XML, PNG 등과 같은 대부분의 기술 표준에서 채택되어 사용한다.
<link href="/author.html" rel="license" hreflang="en" >요청에 대한 무결성 메타데이터를 나타낸다.
지원하는 해시(hash)는 sha256, sha384, sha512이다. 온라인에서 해시를 생성하는 서비스가 있으므로 참고한다. 오픈 소스 라이브러리를 CDN으로 서비스하는 경우에 기본적으로 무결성 해시 키를 제공하는 곳도 있다.
rel 애트리뷰트의 값이 stylesheet, preload, modulepreload인 요소에게만 적용한다.
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw=="
crossorigin="anonymous"
referrerpolicy="no-referrer" />가장 많이 사용되는 대표적인 text/html, text/css, text/javascript가 있고 그외의 유형은 Media Types를 참고하라.
미디어 유형 토큰(token) 생성과 일치하는 문자열이다. 매개변수가 포함될 수 있다. 매개변수가 없는 유효한 MIME 형식 문자열은 U+003B(;)을 포함하지 않은 MIME 형식 문자열이다.
<link href="style.css" type="text/css" rel="stylesheet" >*.css와 같이 스타일시트(stylesheet) 파일을 나타내는 MIME 유형이다.
*.html, *.htm 파일을 나타내는 MIME 유형이다.
*.js 파일을 나타내는 MIME 유형이다.
리소스를 가져올 때 사용할 리퍼러(referrer)를 나타낸다.
제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.
리퍼러(referrer) 헤더(header)가 전송되지 않는다.
요청의 리퍼러(referrer)로 사용할 수 있도록 요청의 전체 referrerURL을 제거하여 보낸다. TLS(HTTPS)를 사용하지 않고 오리진(origin)으로 요청할 때 리퍼러(referrer) 헤더(header)를 보내지 않음을 의미한다. 명시적으로 지정한 정책이 없다면 기본값으로 처리된다.
same-origin-referrer 요청 및 cross-origin-referrer 요청을 모두 수행할 때 요청의 referrerURL의 ASCII 직렬화만 리퍼러(referrer) 정보로 전송되도록 한다.
same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되고 cross-origin-referrer 요청의 경우는 요청의 referrerURL 원본의 ASCII 직렬화만 리퍼러(referrer) 정보로 전송되도록 한다.
same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되도록 한다. 반면에 cross-origin-referrer 요청에는 전송되지 않는다.
요청에 대한 referrerURL 원본의 ASCII 직렬화를 전송한다.
same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되고 cross-origin-referrer 요청시에는 요청의 referrerURL 원본의 ASCII 직렬화만 전송되도로 한다.
요청의 전체 referrerURL이 same-origin-referrer 요청과 cross-origin-referrer 요청 모두에게 전송되도록 한다.
any 키워드 또는 지정된 크기 목록을 값으로 지정한다. rel 애트리뷰트가 icon인 경우에만 사용 가능하다.
공통으로 사용하는 애트리뷰트의 경우 구문에 사용된 요소가 다를 수 있다.
any | [<width>"x"<height>]+
<!-- 1 sizes -->
<link href="favicon.png" sizes="16x16" rel="icon" type="image/png" >
<!-- 2 sizes -->
<link href="favicon.png" sizes="16x16 32x32" rel="icon" type="image/png" >아이콘이 확장 가능하도록 한다.
rel 애트리뷰트 값이 preload이고 as 애트리뷰트 값이 image로 설정되어야 한다.
콤마(,)로 구분된 하나 이상의 문자열 값이며 유저 에이전트가 환경에 따라 선택적으로 사용할 수 있는 이미지 리소스를 나타낸다.
공통으로 사용하는 애트리뷰트의 경우 구문에 사용된 요소가 다를 수 있다.
[<image-url> <width-descriptor>]#
<link rel="preload" as="image"
imagesrcset="foo_400px.jpg 400w, foo_800px.jpg 800w, foo_1600px.jpg 1600w"
imagesizes="50vw">rel 애트리뷰트 값이 preload이고 as 애트리뷰트 값이 image로 설정되어야 한다. 또한 imagesrcset 애트리뷰트도 명시적으로 설정되어야 한다.
리소스의 크기 집합을 나타내는 콤마로 구분된 하나 이상의 문자열을 나타낸다.
공통으로 사용하는 애트리뷰트의 경우 구문에 사용된 요소가 다를 수 있다.
[<media-query-list>? <width>]#
<link rel="preload" as="image"
imagesrcset="foo_400px.jpg 400w, foo_800px.jpg 800w, foo_1600px.jpg 1600w"
imagesizes="(min-width: 400px) 700px, (max-width: 800px) 100vw">외부 리소스를 가져올 때 특정 작업(예: render)을 차단해야 함을 명시적으로 설정한다. 기본값은 차단 가능성이 없는 상태이다.
순서가 없는 공백으로 구분된 고유한 토큰 세트를 나타낸다.
rel 애트리뷰트가 stylesheet 값을 갖는 경우에 사용이 가능하다.
<link href="./style.css" rel="stylesheet" type="text/css" blocking="render" >평가를 하지만 렌더링을 차단한다.
rel 애트리뷰트 값이 mask-icon인 경우 사용이 가능하다. CSS에서 사용하는 색상 값으로 아이콘의 색상을 지정한다.
<link href="./mask-icon.svg" rel="mask-iocn" color="#CCCCCC">연결된 리소스를 가져와 처리할 때 우선 순위를 결정한다.
제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.
동일한 대상을 가진 다른 리소스와 비교하여 가져오기 우선 순위를 자동으로 결정한다.
동일한 대상을 가진 다른 리소스에 비해 우선 순위가 높은 가져오기를 알린다.
동일한 대상을 가진 다른 리소스에 비해 우선 순위가 낮은 가져오기를 알린다.
일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.